<template>
  <div class="main">
	  <div class="main-box animate__animated animate__fadeInUp">
		  <div class="title animate__animated animate__fadeInRight">《毕业留念》</div>
		  <div class="imgContain">
			  <div class="img1 animate__animated animate__flipInY">
				  <img src="../../../public/imgContext/03-1.png">
			  </div>
			  <div class="img2">
				  <img src="../../../public/imgContext/03-2.jpg" class="animate__animated animate__fadeInLeft">
				  <img src="../../../public/imgContext/03-3.jpg" class="animate__animated animate__fadeInRight">
			  </div>
		  </div>
			<div class="content animate__animated animate__fadeInLeft">
				毕业是一场人生的洗礼，人生因为毕业而更加完整。毕业是一首歌，歌中有欢笑，有泪水，有离别，有回忆......是因为在下的时光镶刻了我们独特的青春。
			</div>
	  </div>
  </div>
</template>

<script>
</script>
<style scoped>
.main{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main-box{
    line-height: 1.7rem;
    letter-spacing: 0.1em;
    font-family:"Times New Roman",Georgia,Serif;
    width: 80vw;
    color: white;   
	font-size: 1rem;
	padding: 0.625rem;
    border: 0.125rem solid white;
} 
.title{
	text-align: center;
    margin-bottom: 1.25rem;
    font-size: 1.875rem;
    font-weight: bold;
	animation-delay: 0.7s;
}
.content{
	margin-top: 1.5em;
	animation-delay: 0.7s;
}

.imgContain { 
	width: 90%;	
	margin: 0 auto;
}

.img1,
.img1 > img{
	width: 100%;
	height: 8em;
	margin-bottom: 0.5em;
	animation-delay: 0.7s;
}

.img2{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.img2 > img{
	width: 47%;
	height: 5em;
	animation-delay: 0.7s;
}
</style>
